<?php 
	header('Content-type: text/css');

	$playerHeight = 76;
	$sidebarWidth = 145;
?>

.cssDisplayPanel {
	position:absolute;
	top: <?php echo $playerHeight+1; ?>px;
	left:<?php echo $sidebarWidth+1; ?>px;
	right:0; bottom:0;
	background-color:white;
	margin:0;
}

.cssNowPlayingFrame {
	position:absolute;
	left:0;right:0;top:0;bottom:0;
	height:100%;
	width:100%;
	background-color:white;
	padding:0;
}

.cssPlaylistContainerFrame {
	position:absolute;
	left:0;right:0;top:0;bottom:0;
	height:100%;
	width:100%;
	background-color:white;
	padding:0;
}

/*--------------------------------------Player Frame CSS----------------------------------------*/
.cssHeaderPanel {
	position:absolute;
	left:0;
	right:0;
	top:0;
	height:<?php echo $playerHeight; ?>px;
	background-color:#ABAAB1;
	background-image: url("images/playerBackdrop.png");
	border-bottom:1px solid #4A5660;
}



.cssVolumeControlContainer {
	position:absolute;
	top:30px; height:25px;
	width:191px;
	right:5%;
	line-height:15px;
	background-image: url('images/volumeFiller.png');
	background-repeat:no-repeat;
	vertical-align:center;
	border-collapse:separate;
	border-spacing:2px;
	empty-cells:show;
	padding-top:7px;
	padding-bottom:9px;
	padding-left:11px;
	padding-right:12px;
}
.cssVolumeControlContainer td {
	width:10%;
}
.cssVolumeControlContainer td[filled] {
	background-color: #6E6E6E;
}



.cssPlayerControlFrame {
	position:absolute;
	top:10%; height:80%;
	left:5%;
}

.cssPlayerControlButton_Small {
	width:60px; height:60px;
	background-image: url('images/smallControlButton_Up.png');
	float:left;
}

.cssPlayerControlButton_Small[down] {
	background-image: url('images/smallControlButton_Down.png');
}

.cssPlayerControlButton_Large {
	width:60px; height:60px;
	background-image: url('images/largeControlButton_Up.png');
	float:left;
}

.cssPlayerControlButton_Large[down] {
	background-image: url('images/largeControlButton_Down.png');
}

.cssPlayerStatus {
	position:absolute;
	left:30%; right:30%;
	top:10px; bottom:10px;
	background-color:#D6DAC0;
	background-image:url("images/playerStatusBackdrop.jpg");
	text-align:center;
	font-family:sans-serif;
	font-size:9pt;
	font-weight:bold;
	border-bottom: 2px solid #D6D6D6;
	border-right: 2px solid #D6D6D6;
	border-top:2px solid #959984;
	border-left:2px solid #959984;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	-moz-background-size:100%;
	-webkit-background-size:100%;
	border-radius:7px;
}

.cssPlayerTextBox {
	position:relative;
	width:100%;
	color:#4C4B45;
	text-shadow: #979987 0px 1px 1px;
	font-family:"Lucida Grande", Sans-Serif;
	font-size: 8pt;
	white-space: no-break;
	text-align:center;
	margin-top:2px;
}

.cssPlayerProgressFrame {
	position:absolute;
	bottom:5px;
	left:100px; right:100px;
	border:1px solid #4C4B45;
	height:8px;
	overflow:visible;
	-webkit-box-shadow:#979987 1px 1px 1px;
	vertical-align:middle;
	visibility:hidden;
}

.cssPlayerLoadFill {
	position:absolute;
	left:0;top:0;bottom:0;
	background-color: #BDBFA8;
	width:0;
}

.cssPlayerTimeFill {
	position:absolute;
	left:0;top:0;bottom:0;
	border-right:4px solid black;
	width:0;
}

.cssPlayerTimeBox {
	position:absolute;
	color:#4C4B45;
	text-shadow: #979987 0px 1px 1px;
	font-family:"Lucida Grande",  Sans-Serif;
	font-weight:bold;
	font-size: 8pt;
	line-height:6px;
	white-space:nowrap;
}
.cssPlayerTimeBox[a] {
	right:100%;
	margin-right:4px;
}
.cssPlayerTimeBox[b] {
	left:100%;
	margin-left:4px;
}

.cssPlayerSplash {
	position:absolute;
	top:0;left:0;right:0; bottom:0;
	margin:auto;
	font-family:"Lucida Grande",  Sans-Serif;
	font-style:italic;
	color:black;
	font-size:25pt;
	text-align:center;
	vertical-align:middle;
	line-height:50px;
	text-shadow: #9C9F8F 1px 1px 2px;
}

.cssFlashPlayerContainer {
	position:absolute;
	left:0;
	top:0;
	visibility:hidden;
}


/*-----------------------------------------Music Library Panel CSS-------------------------------------*/

.cssAllMusicFrame {
	position:absolute;
	left:0;right:0;top:0;bottom:0;
	height:100%;
	width:100%;
	background-color:white;
	border-collapse:separate;
	border-spacing:0;
	empty-cells:show;
	padding:0;
}

.cssAllMusicFrame TH {
	height:17px;
	background-image:url('images/itunesDarkRowHeader.gif');
	font-family:"Lucida Grande", Sans-Serif;
	font-size:8pt;
	font-weight:bold;
	text-align:center;
	margin:0;
}

.cssAllMusicFrame TD {
	padding:0;
	margin:0;
}

/* ------------------------------------Sidebar CSS-----------------------------------*/
.cssSidebarPanel {
	position:absolute;
	top:<?php echo $playerHeight+1; ?>px;
	bottom:0;
	left:0;
	width:<?php echo $sidebarWidth; ?>px;
	background-color: #D0D7E2;
	border-right:1px solid #4A5660;
	overflow-x:hidden;
	overflow-y:auto;
}

.cssSidebar_HeaderRow {
	width:100%;
	color: #4A5660;
	font-family:"Lucida Grande", Sans-Serif;
	font-size: 8pt;
	font-weight:bold;
	padding-left:5px;
	margin-top:5px;
	text-shadow: white 0px 1px 1px;
	line-height:17px;
	height:17px;
}

.cssSidebar_Row {
	width:100%;
	font-family:"Lucida Grande",  Sans-Serif;
	font-size: 8pt;
	color:black;
	text-decoration:none;
	white-space:nowrap;
	padding-left:0;
	line-height:20px;
	height:20px;
}
.cssSidebar_Row[activeSelect] {
	background-color:#4673D6;
	background-image:url("images/sidebarSelectBackdrop.gif");
	color:white;
	font-weight:bold;
	text-shadow: #144F8E 0px 1px 1px;
}
.cssSidebar_Row img{
	float:left;
	margin-top:2px;
	margin-right:5px;
	margin-left:15px;
}
.cssSidebarLock {
	float:right;
}

.cssSidebarActionBar {
	position:absolute;
	left:0;right:0;bottom:0;
	height:19px;
	background-color:white;
	background-image: url("images/sidebarActionBarBackdrop.gif");
	text-align:center;
	vertical-align:middle;
	line-height:20px;
	font-size:8pt;
	font-weight:bold;
	overflow:hidden;
}
.cssSidebarActionBar a {
	text-decoration:none;
	color: #595959;
	text-shadow: white 0px 1px 1px;
}
.cssSidebarActionBar img {
	float:left;
}

/*-----------------------------------------Browser Action bar CSS-------------------------------------*/
.cssBrowserActionBar {
	position:absolute;
	bottom:0;
	height:33px;
	width:100%;
	background-color:#ABAAB1;
	background-image: url("images/playerBackdrop.png");
	border-top:1px solid #BABABA;
	border-right:1px solid #BABABA;
	text-align:center;
	vertical-align:middle;

}
.cssBrowserActionBar INPUT{
	margin-top:6px;
	border:1px solid gray;
	padding-left:20px;
	font-family:"Lucida Grande", Sans-Serif;
	font-size:9pt;
	background:url("images/searchIcon.gif") no-repeat 3px center white;
}

/*-----------------------------------------Action Bar Buttons CSS-------------------------------------*/
.cssActionBar {
	position:absolute;
	left:0;right:0;bottom:0;
	height:33px;
	background-color:#ABAAB1;
	background-image: url("images/playerBackdrop.png");
	border-top:1px solid #BABABA;
	border-right:1px solid #BABABA;
	text-align:center;
	vertical-align:middle;
}

.cssActionBarButton {
	margin-top:7px;
	margin-right:20px;
	margin-left:1px;
	padding:4px;
	padding-top:3px;
	font-family:"Lucida Grande",  Sans-Serif;
	font-size:7pt;
	font-weight:bold;
	line-height:7pt;
	font-weight:bold;
	-moz-border-radius:4px;
	-webkit-border-radius:6px;
	float:right;
	color:gray;
	border:1px hidden silver;
}

.cssActionBarButton[enabled] {
	color:black;
	text-shadow: white 0px 1px 1px;
}

.cssActionBarButton[enabled]:hover {
	background:#626262;
	color:white;
	border:1px solid #626262;
	text-shadow: #3A3A3A 0px 1px 1px;
	margin-left:0;
	margin-right:19px;
	margin-top:6px;
}

.cssActionBarSearch {
	margin-top:6px;
	border:1px solid gray;
	padding-left:20px;
	font-family:"Lucida Grande", Sans-Serif;
	font-size:9pt;
	background:url("images/searchIcon.gif") no-repeat 3px center white;
}

.cssActionBarProgressFrame {
	visibility:hidden;
	position:absolute;
	background:white;
	border:1px solid #626262;
	left:10px;
	width:150px;
	height:6px;
	top:14px;
}

.cssActionBarProgressFill {
	position:absolute;
	left:0;top:0;
	height:100%;
	width:50%;
	background-color:#4673D6;
	background-image:url("images/sidebarSelectBackdrop.gif");
	background-position:center;
}

/*-----------------------------------------Library List CSS-------------------------------------*/

/* - Table Cell Content Wrapper, used to restore absolute positioning within a table cell - */
.cssCellWrapperDiv {position:relative; height:100%;width:100%;margin:0;padding:0;}

.cssLibraryList {
	position:absolute;
	left:0;right:0;top:0;bottom:33px;
	width:100%;
	vertical-align:top;
	overflow:auto;
	overflow-x:hidden;
	overflow-y:scroll;
	padding-top:2px;
	padding:0;margin:0;
	border-left:1px solid #4A5660;
}

.cssLibraryListItem {
	width:100%;
	font-family:"Lucida Grande",  Sans-Serif;
	font-size:8pt;
	text-align:left;
	margin:0;
	margin-left:0px;
	padding:2px;
	padding-left:5px;
	padding-right:8px;
	white-space:nowrap;
	background-color:white;
}

.cssLibraryListItem[oddrow] {
	background-color: #EDF3FE;
}

.cssLibraryListItem[activeSelect] {
	background-color:#4673D6;
	background-image:url("images/sidebarSelectBackdrop.gif");
	color:white;
	font-weight:bold;
	text-shadow: #144F8E 0px 1px 1px;
}

.cssLibraryListItem A {
	background-color:#E8E8E8;
	border:1px solid #C9C9C9;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	float:right;
	margin-right:3px;
	font-size:7pt;
	padding-left:3px;
	padding-right:3px;
	color:black;
}

.cssLibraryListItem[activeSelect] A {
	background-color:#4673D6;
	border:1px solid #35547A;
	color:white;
	font-weight:normal;
}

.cssFillerFrame {
	position:absolute;
	top:0;left:0;right:0;bottom:0;
	background-color:#E8E8E8;	
}

.cssWaitFrame {
	position:absolute;
	top:0;left:0;right:0;bottom:0;
	background-color:#E8E8E8;
	background-image:url("images/mediumLoadingAnimation.gif");
	background-position:center;
	background-repeat:no-repeat;
}



/*---------------------------------Now Playing & Playlist CSS------------------------------------------*/
.cssPlaylistHeader {
	position:absolute;
	left:0;top:0;right:0;
	height:17px;
	border-collapse:separate;
	border-spacing:0;
	empty-cells:show;
	width:100%;
}
.cssPlaylistHeader TD{
	color:black;
}
.cssPlaylist {
	position:absolute;
	top:0;left:0;right:0;bottom:0;
	width:100%;
	border-collapse:collapse;
	border-spacing:0;
	empty-cells:show;
}

.cssPlaylistItem {
	font-family:"Lucida Grande", Sans-Serif;
	font-size:8pt;
	text-align:left;
	margin:0;
	margin-left:0px;
	padding:2px;
	padding-left:5px;
	padding-right:8px;
	white-space:nowrap;
	height:20px;
}

.cssPlaylistItem[oddrow] {
	background-color: #EDF3FE;
}

.cssPlaylistItem[header] {
	height:17px;
	background-image:url('images/itunesDarkRowHeader.gif');
	font-weight:bold;
	margin:0;
	padding:0;
}

.cssPlaylistItem[selectedRow] {
	background-color:#4673D6; 
	color:white;
	font-weight:bold;
	text-shadow: #144F8E 0px 1px 1px;
}

.cssPlaylistItem div {
	width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
}

.cssPlaylistItem[selectedRow] img {
	visibility:inherit;
}

.cssPlaylistItem img {
	visibility:hidden;
	float:right;
	border:none;
	margin-right:5px;
}

.cssPlaylistItem_Num {
	width:36px;
	min-width:36px;
	max-width:36px;
	text-align:right;
	color:silver;
	padding-right:10px;
	padding-left:5px;
}

.cssPlaylistItem_Num[currentSong] {
	background-image:url("images/playing.png");
	background-position: 5px center;
	background-repeat: no-repeat;
}

.cssPlaylistItem_Title {
	width:300px;
	min-width:300px;
	max-width:300px;
	padding-right:10px;
}
.cssPlaylistItem_Artist {
	width:200px;
	min-width:200px;
	max-width:200px;
	padding-right:10px;
}
.cssPlaylistItem_Album {
	width:200px;
	min-width:200px;
	max-width:200px;
	padding-right:10px;
}
.cssPlaylistItem_Time {
	width:60px;
	min-width:200px;
	max-width:60px;
	padding-right:10px;
}
.cssPlaylistItem_Rating {
	width:100px;
	min-width:200px;
	max-width:100px;
	padding-right:10px;
}
.cssPlaylistItem_Rating img{
	visibility:inherit;
	float:none;
}
.scrollingWrapper {
	position:absolute;
	left:0;top:0;right:0;bottom:0;
	overflow-x:hidden;
	overflow-y:scroll;
}